<template>
  <el-container>
    <el-header>
      <h4>页面定制</h4>
    </el-header>
    <el-main style="margin-left: 20px">
      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="addTab(editableTabsValue)">新增页面</el-button>
        <el-button type="primary">调整页面顺序</el-button>
      </div>
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <!--          {{item.content}}-->
        </el-tab-pane>
      </el-tabs>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input placeholder="请输入标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="定制图">
          <el-input v-model="form.pageImg"></el-input>
        </el-form-item>
      </el-form>
      <div class="divBody">
        <div class="imgContainer">
          <canvas id="pageCanvas" class="canvasClass" @mousedown='mousedown' @mousemove='mousemove'
                  @mouseup='mouseup'></canvas>
          <img id="image" class="imageClass" src="@/assets/images/pageBckMin.png"/>
        </div>
      </div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelForm">取消</el-button>
            <el-button v-if="dialogTitle=='修改配置'" type="primary" @click="edittoForm('ruleForm')">提交</el-button>
            <el-button v-else type="primary" @click="addtoForm('ruleForm')">提交</el-button>

          </el-form-item>
        </el-form>
      </el-dialog>

      <div>
        <el-row>
          <el-col :span="12">
            <h4>配置列表</h4>
          </el-col>
          <el-col :span="12">
            <el-button type="primary">保存</el-button>
          </el-col>
        </el-row>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="type" label="配置类型"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2,
        form: {
          title: '',
          pageImg: '',
          page: 1, //当前页
          enterList: []
        },

        ruleForm: {
          name: '',
          region: '',
          start_x: 0,
          start_y: 0,
          width: 0,
          height: 0,

        },
        dialogVisible: false,
        dialogTitle: '新增配置',
        editIndex: -1,
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          region: [
            {required: true, message: '请选择活动区域', trigger: 'change'}
          ],
        },
        tableData: [{
          id: 1,
          name: '个人中心',
          type: 'App',
        }, {
          id: 2,
          name: '错题本',
          type: 'App',
        }, {
          id: 3,
          name: '学情分析',
          type: 'App',
        }, {
          id: 4,
          name: '月度测试',
          type: 'App',
        }],

        //canvas所需数据
        start_x: '',
        start_y: '',
        end_x: '',
        end_y: '',
        flag: false,
        list: []
      }
    },
    methods: {
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      handleEdit(index, row) {
        this.editIndex = index
        this.ruleForm = this.form.enterList[index]
        console.log(this.form.enterList)
        this.dialogTitle = '修改配置'
        this.dialogVisible = true
      },
      handleDelete(index, row) {
        console.log('this is delete')
        console.log(index)
        var delData = this.form.enterList[index]
        if (delData) {
          console.log(delData)
          this.form.enterList.splice(index)
          this.list.splice(index)
          //矩形框同步删除
          this.delRect(delData.start_x, delData.start_y, delData.width, delData.height)
        }

      },
      resetFields() {
        this.ruleForm.name = ''
        this.ruleForm.region = ''
      },
      cancelForm() {
        this.dialogVisible = false
        // this.resetFields()
      },
      addtoForm() {
        this.ruleForm.start_x = this.start_x
        this.ruleForm.start_y = this.start_y
        this.ruleForm.width = this.end_x - this.start_x
        this.ruleForm.height = this.end_y - this.start_y
        this.form.enterList.push({
          name: this.ruleForm.name,
          region: this.ruleForm.region,
          start_x: this.ruleForm.start_x,
          start_y: this.ruleForm.start_y,
          width: this.ruleForm.width,
          height: this.ruleForm.height,
        })
        this.dialogVisible = false
      },
      edittoForm() {
        this.form.enterList[this.editIndex] = this.ruleForm
        this.dialogVisible = false
      },
      mousedown(event) {
        // 鼠标开始记录坐标
        this.flag = true
        this.start_x = event.offsetX
        this.start_y = event.offsetY
      },
      mousemove(event) {
        // 鼠标移动过程中画矩形框
        // console.log(event.offsetX,event.offsetY,'移动中')
        this.drawRect(event);
      },
      drawRect(event) {
        if (this.flag) {
          this.end_x = event.offsetX
          this.end_y = event.offsetY
          // 清除画布，相当于橡皮擦？
          const canvas = document.getElementById('pageCanvas')
          this.ctx.clearRect(0, 0, canvas.width, canvas.height);
          this.ctx.fillStyle = 'red'
          // 绘制保存的坐标
          this.list.forEach((value, index) => {
            this.ctx.strokeRect(value.start_x, value.start_y, value.width, value.height);
            this.ctx.fillText(index + 1, value.start_x, value.start_y, value.width);
          })

          // 开始绘制
          this.ctx.beginPath();
          //设置线条颜色，必须放在绘制之前
          this.ctx.strokeStyle = 'block';
          // 线宽设置，必须放在绘制之前
          this.ctx.lineWidth = 1;
          // 进行矩形绘制(矩形左上角的 x 坐标,矩形左上角的 y 坐标，矩形的宽度，矩形的高度)
          this.ctx.strokeRect(this.start_x, this.start_y, this.end_x - this.start_x, this.end_y - this.start_y);
          var num = this.list.length + 1
          this.ctx.fillText(num, this.start_x, this.start_y, this.width);
        }
      },

      delRect(x, y, width, height) {
        this.ctx.clearRect(x-2, y-2, width+3, height+3);
      },

      mouseup() {
        this.resetFields()
        this.flag = false
        this.dialogVisible = true
        // 停止保存坐标
        this.list.push({
          start_x: this.start_x,
          start_y: this.start_y,
          width: this.end_x - this.start_x,
          height: this.end_y - this.start_y,
        })
      }
    },
    mounted() {
      this.$nextTick(() => {
        const canvas = document.getElementById('pageCanvas')
        this.ctx = canvas.getContext("2d");
        const bg = document.getElementsByClassName('imgContainer')[0] //动态获取父元素 宽高--->赋值
        canvas.width = bg.clientWidth
        canvas.height = bg.clientHeight
      })
    },
  }
</script>

<style scoped>
  .divBody {
    overflow: auto;
  }

  .imgContainer {
    position: relative;
    width: 640px;
    height: 480px;
  }

  .canvasClass {
    width: 640px;
    height: 480px;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid red;
    position: absolute;
  }

  canvas {
    display: inline-block;
    overflow-clip-margin: content-box;
    /*overflow: clip;*/
  }

  .imageClass {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow-clip-margin: content-box;
    /*overflow: clip;*/
  }

</style>
